<template>
  <div class="device-details">
    <DynamicForm ref="dynamicFormRef"
                 type="see"
                 @click="callBack"
                 :rulesForm="state.deviceDetailsForm"/>

    <el-card>
      <template #header>
        <span>关联子设备</span>
      </template>
      <DynamicTable ref="dynamicTableRef"
                    @click="callBack"
                    :columns="state.deviceChildrenColumns"
                    :table="state.table"
                    :data="state.deviceChildrenData">

      </DynamicTable>
    </el-card>

    <el-card>
      <template #header>
        <span>设备维修</span>
      </template>
      <DynamicTable ref="dynamicTable2Ref" :columns="state.deviceRepairColumns" :table="state.table"
                    :data="state.deviceRepairData"/>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import {useRoute} from 'vue-router';

import DynamicTable from '@/components/layout/table/dynamic-table.vue';
import DynamicForm from '@/components/layout/form/dynamic-form.vue';

import {deviceDetailsForm} from "@/assets/script/monitor/forms/device/device-details-form";
import {deviceChildrenColumns, deviceRepairColumns} from '@/assets/script/monitor/columns/device';
import {findByIdApi, listDevicePageApi, listDeviceRepairApi} from '@/api/device';

const dynamicFormRef = ref(DynamicForm)
const dynamicTableRef = ref(DynamicTable)
const dynamicTable2Ref = ref(DynamicTable)

const router = useRoute()

const state = reactive({
  data: [] as any,
  table: {
    total: 0,
    page: false,
    pageSize: 15,
    pageIndex: 1
  },
  deviceDetailsForm: deviceDetailsForm,
  deviceChildrenColumns: deviceChildrenColumns,
  deviceChildrenData: [] as any,
  deviceRepairColumns: deviceRepairColumns,
  deviceRepairData: [] as any,
  storey: [] as any,
  floor: [] as any,
  room: [] as any,
  refresh: 0 as number,
  searchData: {} as any,
  row: {} as any
})

onMounted(() => {
  if (router.query && router.query.id) {
    findById({id: router.query.id})
    listDevicePage({parentId: router.query.id})
    listDeviceRepair({deviceId: router.query.id})
  }
})

const callBack = (data: any) => {
  switch (data.type || '') {
    case 'formClose':
      emits('appClick', {type: 'closeTab', data: router.path})
      break
    default:
      console.log('callBack', data)
      break
  }
}
const closeTab = () => {
  emits('appClick', {type: 'closeTab', data: router.path})
}

const findById = (params: any) => {
  findByIdApi(params).then((data: any) => {
    const card = state.deviceDetailsForm[0].card
    card.forEach((e: any) => {
      e[e.name] = data[e.name]
    })
    state.refresh = Math.random()
  })
}

const listDevicePage = (params: any) => {
  listDevicePageApi(params).then((data: any) => {
    state.deviceChildrenData = data.data
  })
}

const listDeviceRepair = (params: any) => {
  listDeviceRepairApi(params).then((data: any) => {
    state.deviceRepairData = data
  })
}

</script>